html, body {
    margin: 0;
    height: 100%;
}

body {
    background-color: rgb(199, 213, 235);
}

.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
  
.middle {
    display: table-cell;
    vertical-align: middle;
}
  
.inner {
    margin-left: auto;
    margin-right: auto;
}

.bg-container {
    background-image: url(../background/background2024.png);
    background-size: contain;
    height: 904px;
    width: 1379px;
    border: 5px solid black;
    box-sizing: border-box;
    margin: auto;
}

.footer {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: auto;
    padding: 5px;
}

.info > a,
.author > a {
    color:black;
}

.button {
  height: 17px;
}

.yt-player {
    position: absolute;
    bottom: 8px;
    right: 5px;
    display: flex;
}

.yt-label {
    left: 50px;
    position: relative;
}

.grid-1 {
    display: flex;
}

section div {
    background: transparent;
}

/* door styles */
.grid-1 input {
    display: none;
}

.label-circle {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;

    display: flex;
    min-height: 100%;
    width: 100%;
    border-radius: 50%;
}

.door-circle {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 700ms;
    border: 1px solid transparent;
    border-radius: 50%;
}

.door-circle div {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
  
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.door-circle .back {
    transform: rotateY(180deg);
}

label:hover .door-circle {
    border-color: black;
    transform: rotateY(180deg);
}
   
:checked + .door-circle {
    transform: rotateY(180deg);
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}


/* individual items */
.day-1 {
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin-left: 12px;
    margin-top: 170px;
}

.day-1 .back {
    background: url(../doors/Door01.png);
    background-size: cover;
    background-position: top;
}

.day-2 {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-left: 75px;
  margin-top: 83px;
}

.day-2 .back {
  background: url(../doors/Door02.png);
  background-size: cover;
  background-position: center;
}

.day-3 {
  position: absolute;
  width: 55px;
  height: 54px;
  border-radius: 50%;
  margin-left: 395px;
  margin-top: 42px;
}

.day-3 .back {
  background: url(../doors/Door01.png);
  background-size: cover;
  background-position: top;
}

.day-4 {
  position: absolute;
  width: 55px;
  height: 54px;
  border-radius: 50%;
  margin-left: 462px;
  margin-top: 155px;
}

.day-4 .back {
  background: url(../doors/Door04.png);
  background-size: cover;
  background-position: center;
}

.day-5 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 507px;
  margin-top: 18px;
}

.day-5 .back {
  background: url(../doors/Door05.png);
  background-size: cover;
  background-position: center;
}

.day-6 {
  position: absolute;
  width: 55px;
  height: 54px;
  border-radius: 50%;
  margin-left: 614px;
  margin-top: 77px;
}

.day-6 .back {
  background: url(../doors/Door06.png);
  background-size: cover;
  background-position: top;
}

.day-7 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 720px;
  margin-top: 35px;
}

.day-7 .back {
  background: url(../doors/Door07.png);
  background-size: cover;
  background-position: center;
}

.day-8 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 757px;
  margin-top: 116px;
}

.day-8 .back {
  background: url(../doors/Door08.png);
  background-size: cover;
  background-position: center;
}

.day-9 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 840px;
  margin-top: 24px;
}

.day-9 .back {
  background: url(../doors/Door09.png);
  background-size: cover;
  background-position: top;
}

.day-10 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 878px;
  margin-top: 193px;
}

.day-10 .back {
  background: url(../doors/Door10.png);
  background-size: cover;
  background-position: top;
}

.day-11 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 940px;
  margin-top: 78px;
}

.day-11 .back {
  background: url(../doors/Door11.png);
  background-size: cover;
  background-position: top;
}

.day-12 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 990px;
  margin-top: 13px;
}

.day-12 .back {
  background: url(../doors/Door12.png);
  background-size: cover;
  background-position: center;
}

.day-13 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 1029px;
  margin-top: 167px;
}

.day-13 .back {
  background: url(../doors/Door13.png);
  background-size: cover;
  background-position: bottom;
}

.day-14 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 1076px;
  margin-top: 49px;
}

.day-14 .back {
  background: url(../doors/Door14.png);
  background-size: cover;
  background-position: top;
}

.day-15 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 1191px;
  margin-top: 43px;
}

.day-15 .back {
  background: url(../doors/Door15.png);
  background-size: cover;
  background-position: center;
}

.day-16 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 1290px;
  margin-top: 130px;
}

.day-16 .back {
  background: url(../doors/Door16.png);
  background-size: cover;
  background-position: bottom;
}

.day-17 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 1295px;
  margin-top: 661px;
}

.day-17 .back {
  background: url(../doors/Door17.png);
  background-size: cover;
  background-position: top;
}

.day-18 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 1085px;
  margin-top: 517px;
}

.day-18 .back {
  background: url(../doors/Door18.png);
  background-size: cover;
  background-position: top;
}

.day-19 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 909px;
  margin-top: 733px;
}

.day-19 .back {
  background: url(../doors/Door13.png);
  background-size: cover;
  background-position: bottom;
}

.day-20 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 797px;
  margin-top: 279px;
}

.day-20 .back {
  background: url(../doors/Door20.png);
  background-size: cover;
  background-position: top;
}

.day-21 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 392px;
  margin-top: 391px;
}

.day-21 .back {
  background: url(../doors/Door13.png);
  background-size: cover;
  background-position: bottom;
}

.day-22 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 318px;
  margin-top: 291px;
}

.day-22 .back {
  background: url(../doors/Door22.png);
  background-size: cover;
  background-position: bottom;
}

.day-23 {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-left: 153px;
  margin-top: 460px;
}

.day-23 .back {
  background: url(../doors/Door23.png);
  background-size: cover;
  background-position: top;
}

.day-24 {
  position: absolute;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  margin-left: 35px;
  margin-top: 730px;
}

.day-24 .back {
  background: url(../doors/Door24.png);
  background-size: cover;
  background-position: center left;
}

.secret {
  position: absolute;
  width: 16px;
  height: 20px;
  margin-left: 1338px;
  margin-top: 32px;
  rotate: 33deg;
}

.secret-1 {
  position: absolute;
  width: 9px;
  height: 5px;
  margin-left: 1117px;
  margin-top: 465px;
  rotate: 49deg;
}

.secret-2 {
  position: absolute;
  width: 37px;
  height: 48px;
  margin-left: 167px;
  margin-top: 614px;
  rotate: 34deg;
}

.secret-3 {
  position: absolute;
  width: 14px;
  height: 21px;
  margin-left: 50px;
  margin-top: 375px;
  rotate: 26deg;
}

.secret-4 {
  position: absolute;
  width: 15px;
  height: 15px;
  margin-left: 1127px;
  margin-top: 197px;
}

.secret-5 {
  position: absolute;
  width: 25px;
  height: 24px;
  margin-left: 452px;
  margin-top: 659px;
}

.secret-6 {
  position: absolute;
  width: 90px;
  height: 29px;
  margin-left: 894px;
  margin-top: 809px;
  rotate: -9deg;
}

.secret-7 {
  position: absolute;
  width: 34px;
  height: 25px;
  margin-left: 191px;
  margin-top: 214px;
  rotate: 41deg;
}

.secret-8 {
  position: absolute;
  width: 33px;
  height: 27px;
  margin-left: 239px;
  margin-top: 91px;
}

.secret-9 {
  position: absolute;
  width: 14px;
  height: 19px;
  margin-left: 1201px;
  margin-top: 533px;
  rotate: 48deg;
}

.secret-10 {
  position: absolute;
  width: 14px;
  height: 19px;
  margin-left: 809px;
  margin-top: 720px;
  rotate: -14deg;
}

.secret::hover, 
.secret-1::hover,
.secret-2::hover,
.secret-3::hover,
.secret-4::hover,
.secret-5::hover,
.secret-6::hover,
.secret-7::hover,
.secret-8::hover,
.secret-9::hover,
.secret-10::hover {
  cursor: pointer;
}

.secret > a,
.secret-1 > a,
.secret-2 > a,
.secret-3 > a,
.secret-4 > a,
.secret-5 > a,
.secret-6 > a,
.secret-7 > a,
.secret-8 > a,
.secret-9 > a,
.secret-10 > a {
  height: 100%;
  width: 100%;
  display: block;
}

/*
  Hello there adventurer, a little something for you!  
  https://www.steamgifts.com/giveaway/b8zXn/
*/